<template>
  <view class="record-detail-container">
    <view class="header">
      <view class="back" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="title">检测记录详情</view>
    </view>
    
    <view class="detail-card" v-if="recordDetail">
      <view class="record-title">{{ recordDetail.name }}</view>
      <view class="record-date">检测日期：{{ formatDate(recordDetail.date) }}</view>
      
      <view class="data-section">
        <view class="section-title">检测结果</view>
        <view class="result-summary">
          {{ recordDetail.summary }}
        </view>
      </view>
      
      <view class="data-section">
        <view class="section-title">详细分析</view>
        <view class="result-detail">
          {{ recordDetail.details }}
        </view>
      </view>
      
      <view class="data-section">
        <view class="section-title">健康建议</view>
        <view class="advice-list">
          <view class="advice-item" v-for="(item, index) in recordDetail.advice" :key="index">
            <text class="advice-dot">•</text>
            <text class="advice-text">{{ item }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="empty-state" v-else>
      <text class="empty-text">记录不存在或已被删除</text>
    </view>
    
    <view class="action-buttons" v-if="recordDetail">
      <view class="action-btn" @tap="shareRecord">分享记录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recordId: '',
      recordDetail: null
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.recordId = options.id
      this.getRecordDetail()
    }
  },
  
  methods: {
    getRecordDetail() {
      // 模拟获取记录详情
      // 实际应用中应该从服务器或本地存储获取
      setTimeout(() => {
        this.recordDetail = {
          id: this.recordId,
          name: this.recordId == 1 ? '中医体质辨识' : (this.recordId == 2 ? '睡眠质量检测' : '血压监测'),
          date: this.recordId == 1 ? new Date('2023-10-15') : (this.recordId == 2 ? new Date('2023-11-20') : new Date('2023-12-05')),
          summary: this.recordId == 1 ? 
            '气虚质为主，兼有湿热质' : 
            (this.recordId == 2 ? '轻度睡眠问题' : '收缩压125/舒张压80'),
          details: this.recordId == 1 ? 
            '气虚质表现为：容易疲劳，气短，说话无力，自汗，舌淡，脉弱。湿热质表现为：面部油脂分泌旺盛，容易长痘，大便粘滞，舌苔黄腻，脉滑数。' : 
            (this.recordId == 2 ? '入睡时间较长，易醒，深度睡眠不足，需要改善。' : '血压稳定，处于正常范围内。'),
          advice: this.recordId == 1 ? 
            [
              '增强体质锻炼，每天进行30分钟以上的有氧运动',
              '饮食宜清淡，避免辛辣刺激食物',
              '保持充足睡眠，避免过度疲劳',
              '可服用中药调理，如补中益气丸'
            ] : 
            (this.recordId == 2 ? 
              [
                '保持规律作息，固定睡眠时间',
                '睡前1小时避免使用电子设备',
                '睡前可喝杯温热牛奶或蜂蜜水',
                '睡前进行放松练习，如深呼吸或冥想',
                '保持卧室安静、黑暗、温度适宜'
              ] : 
              [
                '定期监测血压，每周至少2-3次',
                '控制钠盐摄入，避免高盐饮食',
                '保持适当运动，避免过度劳累',
                '保持良好心态，避免情绪激动'
              ]
            )
        }
      }, 500)
    },
    
    formatDate(date) {
      if (!date) return '--'
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },
    
    goBack() {
      uni.navigateBack()
    },
    
    shareRecord() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.record-detail-container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  
  .back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    
    .back-icon {
      font-size: 40rpx;
      color: #333;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  
  .record-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .record-date {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
}

.data-section {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
    padding-left: 16rpx;
    border-left: 6rpx solid #32CD32;
  }
  
  .result-summary {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    background-color: #f9f9f9;
    padding: 16rpx;
    border-radius: 8rpx;
  }
  
  .result-detail {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
  
  .advice-list {
    .advice-item {
      display: flex;
      margin-bottom: 12rpx;
      
      .advice-dot {
        color: #32CD32;
        margin-right: 10rpx;
        font-weight: bold;
      }
      
      .advice-text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
        flex: 1;
      }
    }
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  background-color: #fff;
  border-radius: 16rpx;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.action-buttons {
  margin-top: 30rpx;
  
  .action-btn {
    background-color: #32CD32;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 8rpx;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style> 